<template>
    <div class="login">
        <div class="main_center">
            <div style="text-align:center;">
                <h1>欢迎使用</h1>
                <h1>PVZ 信息管理系统</h1>
            </div>
            <div class="second_center">
                <div style="margin: 10px"></div>
                <el-form label-position="right" label-width="10px" :model="loginForm" style="max-width: 240px">
                    <el-form-item>
                        <el-input v-model="loginForm.name" placeholder="  输入用户名" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" type="password" placeholder="  输入密码" show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:240px;" round @click="handleLogin">登录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:240px;" round @click="handleRegister">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script setup>

import { login, setToken } from '../api/user';
import { ElNotification } from 'element-plus'

const router = useRouter()

const loginForm = reactive({
    name: 'admin',
    password: 'admin'
})

const handleLogin = () => {
    // TODO: 完成表单验证
    login(loginForm.name, loginForm.password).then(data => {
        console.log(data);
        if (data.code === 200) {
            setToken(data.data)
            ElNotification({
                title: '登录成功',
                message: '欢迎使用 PVZ 信息管理系统',
                type: 'success',
            })
            setTimeout(() => {
                router.push('/home')
            }, 1000);
        } else {
            sessionStorage.clear()
        }
    })
}

const handleRegister = () => {
    router.push('/register')
}

</script>
    

<style lang="scss" scoped>
.login {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-image: url('@/assets/images/pvz_bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.main_center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    top: 30px;
    width: 40%;
    height: 42%;
    border-radius: 40px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

.second_center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    width: auto;
    height: auto;
}
</style>